<template>
    <div class="input-container">
      <input
        v-model="inputText"
        @keyup.enter="handleSubmit"
        placeholder="添加新任务..."
        class="todo-input"
      />
      <button @click="handleSubmit" class="add-btn">+</button>
    </div>
  </template>
 <script>
 export default {
   name: 'TodoInput',
   data() {
     return {
       inputText: ''
     }
   },
   methods: {
     handleSubmit() {
       if (this.inputText.trim()) {
         this.$emit('add-todo', this.inputText.trim())
         this.inputText = ''
       }
     }
   }
 }
 </script>
  <script setup>
  import { ref } from 'vue'
  
  const inputText = ref('')
  const emit = defineEmits(['add-todo'])
  
  const handleSubmit = () => {
    if (inputText.value.trim()) {
      emit('add-todo', inputText.value.trim())
      inputText.value = ''
    }
  }
  </script>
  
  <style scoped>
  .input-container {
    display: flex;
    margin-bottom: 1rem;
  }
  
  .todo-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
  }
  
  .add-btn {
    padding: 0 1.5rem;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1.25rem;
  }
  
  .add-btn:hover {
    background: #3aa876;
  }
  </style>